Información de autor en las entradas

La información de autor en el post-footer parece que se puso de moda, algunos blogs ya lo mostraban hace tiempo y cada vez son más las plantillas para descargar personalizadas con los datos de autor.

En mi blog de pruebas lo tenía añadido y leyendo a Rosa quise comprobar el resultado cuando escribe más de un autor. Para empezar nada mejor que hacerlo por el principio.

Suprimimos el nombre de autor del post-footer.

No tiene sentido añadir los datos de autor y mostrar también el nombre de autor al final de las entradas, así que desactivaremos la casilla de "Publicado por" en Diseño/Entradas del blog/Editar/ guardamos los cambios y con eso no se mostrará el nombre de autor. Si por cualquier causa se resiste en la siguiente entrada veremos como eliminar esa parte desde la plantilla.

Información de autor con enlaces.
Añadimos los estilos para conseguir algo similar a la siguiente imagen:

Justo antes de ]]></b:skin> añadimos:

.datos-autor { /* contenedor información  */
-moz-border-radius:5px;
background-color:#884062; /* color de fondo contenido */
border-color:#000; /* color borde */
border-style:solid;
border-width:1px;
margin-top:-30px;
margin-bottom:40px;
padding:5px;
}
.avatar-img img { /* imagen avatar */
-moz-border-radius:5px;
background-color:#000; /* color fondo */
float:left;
margin-right:10px;
margin-top:20px; }
.info-autor { /* texto información */
color:#fff; /* color texto */
font-size:12px;
line-height:1.4em;
margin-left:5px;
padding-right:5px;
text-transform:none;margin-bottom:15px;
}
.info-autor h3 { color:#eee !important; /* color título */
font-size:17px; /* tamaño de fuente */
font-weight:bold;
margin-left:50px;
margin-top:5px;
text-shadow:0px 1px 0 #000; /* sombra  texto */
text-transform:none;
}
.info-autor a:link, .texto-autor a:visited { /* estilos enlaces */
-moz-border-radius:
5px;background-color:#ccc; /* fondo enlaces */
border:1px solid #000; /* borde color */
color:#000; /* color texto */
font-size:12px; /* tamaño fuente */
line-height:2.2em;
font-weight:bold;
padding:0 6px 0 7px;
text-shadow:1px 1px 0 #676767;
text-transform:none;
}
.info-autor a:hover { /* efecto hover enlaces */
color:#ccc;
font-weight:bold;
text-decoration:none;
text-shadow:1px 1px 0 #000;
}

Escogemos el lugar para mostrar la información.

La información de autor la podemos añadir justo antes de los datos del post-footer (número de comentarios, etiquetas) para ubicar esa parte marcamos para expandir la plantilla y buscamos:

<div class='post-footer'>
o puede que lo tengamos definido de esta otra forma:
<div id='post-footer'>

Si por el contrario deseamos mostrar la información justo después de los datos de post-footer buscaremos:

<div class='post-footer-line post-footer-line-3'>

En algunos casos puede que tengamos una cuarta línea:

<div class='post-footer-line post-footer-line-4'>

También puede que lo tengamos definido así:

<p class='post-footer-line post-footer-line-3'>

Buscamos esa parte donde vamos a mostrar la información, por ejemplo después de los datos del post-footer. Buscamos:

<div class='post-footer-line post-footer-line-3'>

a continuación de esa línea puede que tengamos los iconos a redes sociales proporcionados por Blogger o el sistema de valoración, seguiremos un poco más abajo hasta localizar </b:includable> y justo antes añadimos:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Nombre-autor&quot;'>
<div class='datos-autor'>
<div class='avatar-img'><img alt='' height='70' src='url-avatar' width='55'/>
</div>
<div class='info-autor'>
<h3>Título (Sobre autor)</h3>
<div align='justify'>
<p>Información de autor</p>
<p>Links: <span class='link-autor'>
<a href='Url-enlace1' target='_blank'>Enlace1</a>
<a href='Url-enlace2' target='_blank'>Enlace2</a>
<a href='Url-enlace3' target='_blank'>Enlace3</a>
</span></p>
</div></div></div>
</b:if></b:if>

Si deseamos que la información se muestre en la página principal en lugar de las páginas individuales eliminaremos la primera línea:

<b:if cond='data:blog.pageType == &quot;item&quot;'> y la última </b:if>

Con eso ya tenemos lista la información en el blog pero podemos seguir jugando y añadir en lugar de los enlaces iconos a redes sociales:

Información de autor con iconos a redes sociales.

Antes de ]]></b:skin>

.datos-autor {
-moz-border-radius:5px;
background: #000 url(url-imagen-de-fondo) repeat scroll top left;
border-color:#868686; /* borde color */
border-style:solid;
border-width:1px;margin:0 2px 5px 0;
padding: 5px 10px 15px;}
.avatar-img img {
-moz-border-radius:5px;
background-color:#333; /* avatar color de fondo*/
float:left;
margin-right:10px;
margin-top:10px;
}
.info-autor {
color:#ccc; /* color texto información */
font-size:12px;
line-height:1.4em;
margin-left:5px;
padding-right:5px;
text-transform:none;
margin-bottom:15px;
}
.info-autor h3 {
color:#7DDEED !important; /* color título */
font-size:17px; /* tamaño fuente */
font-weight:bold;
margin-bottom:15px;
margin-left:90px;
margin-top:-5px;
text-shadow:1px 1px 0 #000;
text-transform:none;
}

Ahora buscamos:

<div class='post-footer-line post-footer-line-3'>

y justo después añadiremos:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Nombre-autor&quot;'>
<div class='datos-autor'>
<div class='avatar-img'><img alt='' height='70' src='url-avatar' width='55'/>
</div>
<div class='info-autor'>
<h3>Título (Sobre autor)</h3>
<div align='justify'>
<p>Información de autor</p>
<span style='float: right; margin: -5px -3px 30px 0;'>
<a class='feed' href='http://feeds2.feedburner.com/nombre' rel='nofollow' target='_blank'><img src='url-imagen' width='20'/></a>
<a class='twitter' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url' rel='nofollow' target='_blank'><img src='url-imagen' width='20'/></a>
</span>
</div></div></div>
</b:if></b:if>

(La siguiente entrada nos será útil para añadir los enlaces a redes sociales)

Información para varios autores.

Por último la idea que Rosa aporta y es la posibilidad de mostrar información para distintos autores, para que eso ocurra bastará con repetir el código de un sólo autor tantas veces como autores escriban en el blog añadiendo cada uno el nombre de autor que tiene en la configuración del blog y sustituir la url dela imagen según corresponda a cada autor.:

<b:if cond='data:post.author == &quot;Nombre-autor&quot;'>